<template>
    <div>
        <nav-header title="重置密码"></nav-header>
        <!-- 表单 -->
        <div class="nexts">
            <div class="tel">
                <span>
                    <select name="" id="" class="tel1">
                        <option value="">+86</option>
                    </select>
                </span>
                <input type="tel" name=""  v-model="username" @input="username=$event.target.value" placeholder="请输入你的电话号码" @blur="animate()" />
            </div>
            <div class="tele">
                <input type="tel" placeholder="请输入你的验证码"  v-model="vercode" @input="vercode=$event.target.value" min="0" max="11" />
                <!-- / 1 [3,4,5,7,8] [0-9] {9}$/ -->
                <div class="btn" :class="{ disabled: !this.canClick }" @click="getYanzheng()">
                    {{ content }}
                </div>
            </div>
            <div class="password">
                <span class="inp inp01">
                    <input :type="type" name="" v-model="password1" @input="password1=$event.target.value" placeholder="请输入你的密码" />
                    <div class="eyes" @click="flag = !flag">
                        <van-icon :name="elIcon" size="25px" />
                    </div>
                </span>
            </div>
        </div>
        <div class="bt">
            <div class="login" @click="regId()">确定</div>
        </div>
        <div class="login">
            去<router-link class="p" to="/login">登录</router-link>
        </div>
    </div>
</template>

<script>
import NavHeader from "../../components/Nav-Header.vue";
export default {
    name: "App03GetPass",
    components: { NavHeader },
    data() {
        return {
            content: "发送验证码",
            totalTime: 30,
            canClick: true,
            flag: false,
            passwordType: "password",
            username:'',
            vercode:'',
            password1:'',
        };
    },
    computed: {
        type() {
            return this.flag ? "text" : "password";
        },
        elIcon() {
            return this.flag ? "eye" : "closed-eye";
        },
    },
    mounted() {

    },

    methods: {
        animate() {
            var re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            let str = this.username
            // console.log(re.test(str))
            if (re.test(str)==false) {   
                this.$toast('抱歉手机号不合法!请重新输入！')
            }
        },
        getYanzheng() {
            if (!this.canClick) return;
            this.canClick = false;
            this.content = this.totalTime + "s后重新发送";
            let clock = window.setInterval(() => {
                this.totalTime--;
                this.content = this.totalTime + "s后重新发送";
                if (this.totalTime < 0) {
                    window.clearInterval(clock);
                    this.content = "重新发送验证码";
                    this.totalTime = 10;
                    this.canClick = true;
                }
            }, 1000);

            let username = document.getElementById('username').value
            this.$axios.post('/user/sendSms', {
                mobile: username, type: 'login'
            })
                .then((res) => {
                    console.log(res)
                    if (res.code == 0) {
                        console.log(res)

                        // this.$router.push('/login')
                    } else {
                        setTimeout(() => {
                            this.$toast(res.msg)
                        }, 2000)
                    }
                })
        },
        regId(){
            this.$axios.post('/user/forget',{
                username:this.username,password:this.password1,vercode:this.vercode
            }).then((res)=>{
                console.log(res)
                if(res.code == 0){
                    this.$toast(res.msg+'请重新登录！')
                    this.$router.push('/login')
                }
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.nexts {
    width: 100%;

    .tel {
        width: 95%;
        height: 30px;
        display: flex;
        border-bottom: 1px solid rgb(204, 204, 204);
        margin: 25px auto 0;

        span {
            display: block;
            width: 15%;
            height: 30px;

            // margin-left: 10px;
            .tel1 {
                width: 100%;
                height: 30px;
                border: none;
                font-size: 20px;
                color: grey;

                option {
                    width: 100%;
                    height: 50px;
                    // font-size: 18px;
                }
            }
        }

        input {
            height: 6.733333vw;
            line-height: 30px;
            margin-left: 15px;
        }
    }

    .tele {
        // margin-top: 30px;
        display: flex;
        justify-content: space-between;
        width: 95%;
        height: 30px;
        border-bottom: 1px solid rgb(204, 204, 204);
        padding-bottom: 10px;
        margin: 30px auto 0;

        input {
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            // margin-left: 15px;
        }

        .btn {
            width: 100px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-size: 10px;
            color: #07c160;
            border: 1px solid #07c160;
            border-radius: 20px;
            margin-right: 15px;
        }

        .disabled {
            background-color: rgb(223, 223, 223);
            border-color: #07c160;
            color: #07c160;
            // cursor: not-allowed; // 鼠标变化
        }
    }

    .password {
        width: 95%;
        height: 50px;
        border-bottom: 1px solid rgb(204, 204, 204);
        padding-bottom: 10px;
        // text-align: center;
        position: relative;
        margin: auto;
        display: flex;
        justify-content: space-between;

        input {
            height: 50px;
            font-size: 16px;
            line-height: 50px;
            // margin-left: 15px;
        }

        p {
            color: coral;
            font-size: 15px;
            line-height: 50px;
            margin-right: 10px;
        }

        .inp01 {
            display: flex;

            .eyes {
                position: absolute;
                right: 10px;
                top: 20px;
            }
        }
    }
}

.bt {
    width: 100%;
    text-align: center;
    margin-top: 100px;

    .login {
        width: 80%;
        height: 40px;
        background-color: #07c160;
        color: white;
        margin: auto;
        line-height: 40px;
        border-radius: 30px;
    }
}

.login {
    width: 100%;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;

    .p {
        color: #07c160;
    }
}
</style>